<template>
  <div class="modern-layout">
    <!-- Sidebar -->
    <div class="sidebar">
      <div class="sidebar-header">
        <i class="el-icon-setting"></i>
        <span>管理中心</span>
      </div>
      <ul class="sidebar-menu">
        <li :class="{ active: currentView === 'inventory' }" @click="currentView = 'inventory'">
          <i class="el-icon-box"></i>
          <span>物品管理</span>
        </li>
        <li :class="{ active: currentView === 'rewards' }" @click="currentView = 'rewards'">
          <i class="el-icon-trophy"></i>
          <span>奖励配置</span>
        </li>
        <li :class="{ active: currentView === 'userManagement' }" @click="currentView = 'userManagement'">
          <i class="el-icon-user"></i>
          <span>用户管理</span>
        </li>
      </ul>
    </div>

    <!-- Main Content -->
    <div class="main-content">
      <!-- Inventory View -->
      <div v-if="currentView === 'inventory'" class="content-view">
        <div class="view-header">
          <h1>物品管理</h1>
          <el-button type="primary" icon="el-icon-plus" @click="handleAddItem">新增物品</el-button>
        </div>
        <div class="view-content">
          <el-card class="content-card">
            <div class="table-filters">
              <el-button-group>
                <el-button :type="inventoryFilter === 'all' ? 'primary' : 'default'" @click="inventoryFilter = 'all'">全部</el-button>
                <el-button :type="inventoryFilter === 'food' ? 'primary' : 'default'" @click="inventoryFilter = 'food'">食物</el-button>
                <el-button :type="inventoryFilter === 'toy' ? 'primary' : 'default'" @click="inventoryFilter = 'toy'">玩具</el-button>
              </el-button-group>
            </div>
            <el-table :data="filteredInventory" style="width: 100%" class="modern-table">
              <el-table-column label="物品" min-width="200">
                <template slot-scope="scope">
                  <div class="item-cell">
                    <el-image :src="scope.row.image" fit="cover" class="item-image"></el-image>
                    <div class="item-info">
                      <span class="item-name">{{ scope.row.name }}</span>
                      <span class="item-id">{{ scope.row.itemId }}</span>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="brand" label="品牌"></el-table-column>
              <el-table-column prop="price" label="价格"></el-table-column>
              <el-table-column prop="level" label="等级"></el-table-column>
              <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
              <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleEditItem(scope.row)">编辑</el-button>
                  <el-button size="mini" type="danger" @click="handleDeleteItem(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </div>

      <!-- Rewards View -->
      <div v-if="currentView === 'rewards'" class="content-view">
         <div class="view-header">
          <h1>奖励配置</h1>
        </div>
        <div class="view-content rewards-grid">
           <el-card class="content-card">
            <div slot="header" class="card-header">
              <i class="el-icon-date"></i>
              <span>每日登录奖励</span>
            </div>
            <div class="card-content">
              <el-form :model="dailyReward" label-position="top" v-if="dailyReward">
                <el-form-item label="奖励物品">
                  <div class="item-display-wrapper" v-if="dailyReward.itemDefinition">
                    <el-image :src="dailyReward.itemDefinition.image" fit="cover" class="item-image"></el-image>
                    <span class="item-name">{{ dailyReward.itemDefinition.name }}</span>
                    <span class="item-id">({{ dailyReward.itemId }})</span>
                    <el-button type="text" icon="el-icon-edit" @click="openItemPicker('daily')">修改</el-button>
                  </div>
                  <el-input v-else v-model="dailyReward.itemId" placeholder="点击选择物品">
                    <el-button slot="append" icon="el-icon-search" @click="openItemPicker('daily')"></el-button>
                  </el-input>
                </el-form-item>
                <el-form-item label="数量">
                  <el-input-number v-model="dailyReward.quantity" :min="1" style="width: 100%;"></el-input-number>
                </el-form-item>
                <el-form-item class="form-actions">
                  <el-button type="primary" @click="saveReward(dailyReward)" :loading="isSaving">保存</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>

          <el-card class="content-card">
            <div slot="header" class="card-header">
              <i class="el-icon-trophy"></i>
              <span>7天签到奖励</span>
            </div>
            <div class="card-content">
              <el-table :data="checkInRewards" style="width: 100%" class="modern-table" row-key="id">
                 <el-table-column prop="dayOfCycle" label="天数" width="70" align="center"></el-table-column>
                <el-table-column label="奖励物品" min-width="150">
                  <template slot-scope="scope">
                    <div class="item-display-wrapper" v-if="scope.row.itemDefinition">
                      <el-image :src="scope.row.itemDefinition.image" fit="cover" class="item-image"></el-image>
                      <span class="item-name">{{ scope.row.itemDefinition.name }}</span>
                      <span class="item-id">({{ scope.row.itemId }})</span>
                    </div>
                    <span v-else class="item-id-span" @click="openItemPicker(scope.row)">{{ scope.row.itemId }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="数量" width="120">
                  <template slot-scope="scope">
                    <span v-if="editingRewardId !== scope.row.id">{{ scope.row.quantity }}</span>
                    <el-input-number v-else v-model="scope.row.quantity" :min="1" size="small"></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                  <template slot-scope="scope">
                    <div v-if="editingRewardId !== scope.row.id">
                      <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                    </div>
                    <div v-else>
                      <el-button type="text" @click="handleSave(scope.row)" :loading="isSaving">保存</el-button>
                      <el-button type="text" @click="handleCancel(scope.row)">取消</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </div>
      </div>

      <!-- User Management View -->
      <div v-if="currentView === 'userManagement'" class="content-view">
        <div class="view-header">
          <h1>用户管理</h1>
        </div>
        <div class="view-content">
          <el-card class="content-card">
            <div class="table-filters">
              <el-input
                placeholder="搜索用户ID、用户名或昵称"
                v-model="userSearchQuery"
                clearable
                @clear="fetchUsers"
                @keyup.enter.native="searchUsers"
                style="width: 300px; margin-right: 10px;"
              >
                <el-button slot="append" icon="el-icon-search" @click="searchUsers"></el-button>
              </el-input>
            </div>
            <el-table :data="filteredUsers" style="width: 100%" class="modern-table">
              <el-table-column prop="id" label="用户ID" width="100"></el-table-column>
              <el-table-column prop="username" label="用户名" width="150"></el-table-column>
              <el-table-column prop="nickname" label="昵称" width="150"></el-table-column>
              <el-table-column prop="email" label="邮箱"></el-table-column>
              <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleGiveItem(scope.row)">添加物品</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </div>
    </div>

    <el-dialog title="选择物品" :visible.sync="itemPickerVisible" width="50%"> <!-- Changed width to 50% -->
      <el-tabs v-model="activeItemTab">
        <el-tab-pane label="食物" name="food">
          <el-table :data="foodItems" @row-click="selectItem" height="400px">
            <el-table-column label="图片" width="80">
              <template slot-scope="scope">
                <el-image :src="scope.row.image" fit="cover" class="item-image"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" width="150"></el-table-column> <!-- Added width -->
            <el-table-column prop="itemId" label="物品ID" width="180"></el-table-column> <!-- Added width -->
            <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="玩具" name="toys">
          <el-table :data="toyItems" @row-click="selectItem" height="400px">
            <el-table-column label="图片" width="80">
              <template slot-scope="scope">
                <el-image :src="scope.row.image" fit="cover" class="item-image"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" width="150"></el-table-column> <!-- Added width -->
            <el-table-column prop="itemId" label="物品ID" width="180"></el-table-column> <!-- Added width -->
            <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
      <el-form :model="form" ref="form" label-width="100px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="物品ID" prop="itemId">
          <el-input v-model="form.itemId"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="image">
          <div class="image-uploader">
            <el-image
              v-if="form.image"
              :src="form.image"
              fit="cover"
              class="uploaded-image"
            ></el-image>
            <el-upload
              class="upload-component"
              action="/api/files/upload/image"
              :show-file-list="false"
              :on-success="handleImageUploadSuccess"
              :before-upload="beforeImageUpload"
            >
              <el-button size="small" type="primary">{{ form.image ? '更换图片' : '点击上传' }}</el-button>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item label="品牌" prop="brand">
          <el-input v-model="form.brand"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input-number v-model="form.price" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="等级" prop="level">
          <el-input-number v-model="form.level" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="效果值" prop="effectValue">
          <el-input-number v-model="form.effectValue"></el-input-number>
        </el-form-item>
        <el-form-item label="物品类型" prop="itemType">
          <el-select v-model="form.itemType" placeholder="请选择物品类型" :disabled="form.id !== null">
            <el-option label="食物" value="FOOD"></el-option>
            <el-option label="玩具" value="TOY"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>

    <!-- Dialog for Giving Items to User (Redesigned) -->
    <el-dialog
      :title="selectedUser ? `为用户 ${selectedUser.nickname || selectedUser.username} 添加物品` : '添加物品给用户'"
      :visible.sync="giveItemDialogVisible"
      width="50%"
      class="give-item-dialog"
    >
      <div class="dialog-content-wrapper">
        <div v-if="selectedUser" class="user-info-card">
          <div class="user-avatar">
            <i class="el-icon-user-solid"></i>
          </div>
          <div class="user-details">
            <p class="user-name">{{ selectedUser.nickname || selectedUser.username }}</p>
            <p class="user-id">ID: {{ selectedUser.id }}</p>
          </div>
        </div>

        <el-form :model="giveItemForm" label-width="80px" v-if="selectedUser" class="add-item-form">
          <el-form-item label="物品ID" prop="itemId">
            <el-input v-model="giveItemForm.itemId" placeholder="点击选择物品" class="item-input">
              <el-button slot="append" icon="el-icon-search" @click="openItemPickerForGiveItem"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="数量" prop="quantity">
            <el-input-number v-model="giveItemForm.quantity" :min="1" class="quantity-input"></el-input-number>
          </el-form-item>
        </el-form>

        <el-divider content-position="left">用户当前物品</el-divider>
        <div v-if="selectedUserInventory.length > 0" class="user-inventory-section">
          <el-tabs v-model="activeUserInventoryTab">
            <el-tab-pane label="食物" name="food">
              <el-table :data="userFoodItems" style="width: 100%" max-height="200" size="small">
                <el-table-column label="图片" width="60">
                  <template slot-scope="scope">
                    <el-image :src="scope.row.image" fit="cover" class="item-image-small"></el-image>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="名称" width="120"></el-table-column>
                <el-table-column prop="itemId" label="物品ID" width="150"></el-table-column>
                <el-table-column prop="quantity" label="数量" width="80"></el-table-column>
                <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="玩具" name="toy">
              <el-table :data="userToyItems" style="width: 100%" max-height="200" size="small">
                <el-table-column label="图片" width="60">
                  <template slot-scope="scope">
                    <el-image :src="scope.row.image" fit="cover" class="item-image-small"></el-image>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="名称" width="120"></el-table-column>
                <el-table-column prop="itemId" label="物品ID" width="150"></el-table-column>
                <el-table-column prop="quantity" label="数量" width="80"></el-table-column>
                <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div v-else class="empty-inventory-message">
          <i class="el-icon-info"></i>
          <p>该用户暂无物品。</p>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="giveItemDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitGiveItem" :loading="isGivingItem">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import itemService, { getUserInventory } from '@/api/inventoryService'; // New: Import getUserInventory
import { getAllRewards, updateReward, getAllUsers, giveItemToUser } from '@/api/adminService';
import ImageUrlManager from '@/utils/imageUtils';

export default {
  name: 'ItemsAndRewards',
  data() {
    return {
      currentView: 'inventory',
      inventoryFilter: 'all',
      foodItems: [],
      toyItems: [],
      dialogVisible: false,
      dialogTitle: '',
      form: {
        id: null, 
        itemId: null, 
        name: '', 
        description: '', 
        brand: '',
        price: 0, 
        level: 1, 
        effectValue: 0, 
        itemType: 'FOOD', 
        image: '',
      },
      dailyReward: null,
      checkInRewards: [],
      isSaving: false,
      editingRewardId: null,
      originalRewardData: null,
      itemPickerVisible: false,
      activeItemTab: 'food',
      rewardTarget: null,
      users: [], // New: Store all users
      userSearchQuery: '', // New: Search query for users
      giveItemDialogVisible: false, // New: Dialog for giving items
      selectedUser: null, // New: User selected for giving items
      giveItemForm: { // New: Form for giving items
        itemId: '',
        quantity: 1,
      },
      isGivingItem: false, // New: Loading state for giving items
      selectedUserInventory: [], // New: Store inventory for the selected user
      activeUserInventoryTab: 'food', // New: Active tab for user inventory display
    };
  },
  computed: {
    filteredInventory() {
      const allItems = [...this.foodItems, ...this.toyItems];
      if (this.inventoryFilter === 'food') {
        return this.foodItems;
      }
      if (this.inventoryFilter === 'toy') {
        return this.toyItems;
      }
      return allItems;
    },
    userFoodItems() {
      return this.selectedUserInventory.filter(item => item.itemType === 'FOOD');
    },
    userToyItems() {
      return this.selectedUserInventory.filter(item => item.itemType === 'TOY');
    },
    filteredUsers() {
      if (!this.userSearchQuery) {
        return this.users;
      }
      const query = this.userSearchQuery.toLowerCase();
      return this.users.filter(user =>
        user.id.toString().includes(query) ||
        user.username.toLowerCase().includes(query) ||
        (user.nickname && user.nickname.toLowerCase().includes(query))
      );
    },
  },
  created() {
    this.fetchInventory();
    this.fetchRewards();
    this.fetchUsers(); // New: Fetch users on component creation
  },
  methods: {
    handleImageUploadSuccess(res) {
      console.log('Image upload response:', JSON.stringify(res, null, 2));
      if (res.code === 200 && res.data && res.data.fileUrl) {
        this.form.image = ImageUrlManager.transformImageUrl(res.data.fileUrl);
        this.$message.success('图片上传成功');
      } else {
        this.$message.error(res.message || '图片上传失败，且无具体错误信息');
        console.error('Upload failed:', res);
      }
    },

    beforeImageUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return (isJPG || isPNG) && isLt2M;
    },
    // Inventory Methods
    async fetchInventory() {
      try {
        const response = await itemService.getInventory();
        if (response.data && Array.isArray(response.data)) {
          this.foodItems = response.data.filter(item => item.itemType === 'FOOD');
          this.toyItems = response.data.filter(item => item.itemType === 'TOY');
        }
      } catch (error) {
        this.$message.error('获取物品列表失败');
      }
    },
    resetForm() {
      this.form = { id: null, itemId: null, name: '', description: '', brand: '', price: 0, level: 1, effectValue: 0, itemType: 'FOOD', image: '' };
    },
    handleAddItem() {
      this.resetForm();
      this.dialogTitle = '新增物品';
      this.dialogVisible = true;
    },
    handleEditItem(item) {
      this.form = { ...item };
      this.dialogTitle = '编辑物品';
      this.dialogVisible = true;
    },
    async submitForm() {
      try {
        if (this.form.id) {
          await itemService.updateItem(this.form.itemId, this.form);
          this.$message.success('物品更新成功');
        } else {
          await itemService.createItem(this.form);
          this.$message.success('物品新增成功');
        }
        this.dialogVisible = false;
        this.fetchInventory();
      } catch (error) {
        this.$message.error('操作失败');
      }
    },
    handleDeleteItem(item) {
      this.$confirm('此操作将永久删除该物品, 是否继续?', '提示', { type: 'warning' })
        .then(async () => {
          await itemService.deleteItem(item.itemId);
          this.$message.success('删除成功!');
          this.fetchInventory();
        })
        .catch(() => { this.$message.info('已取消删除'); });
    },

    // Reward Methods
    async fetchRewards() {
      try {
        const response = await getAllRewards();
        if (response.success) {
          const rewards = response.data;
          const allItems = [...this.foodItems, ...this.toyItems];

          this.dailyReward = rewards.find(r => r.rewardType === 'DAILY_LOGIN');
          if (this.dailyReward) {
            this.dailyReward.itemDefinition = allItems.find(item => item.itemId === this.dailyReward.itemId);
          }

          this.checkInRewards = rewards.filter(r => r.rewardType === 'CHECK_IN').sort((a, b) => a.dayOfCycle - b.dayOfCycle);
          this.checkInRewards.forEach(reward => {
            reward.itemDefinition = allItems.find(item => item.itemId === reward.itemId);
          });
        } else {
          this.$message.error(response.message || '获取奖励规则失败');
        }
      } catch (error) {
        this.$message.error('获取奖励规则失败');
      }
    },
    handleEdit(row) {
      this.originalRewardData = { ...row };
      this.editingRewardId = row.id;
    },
    handleCancel(row) {
      const index = this.checkInRewards.findIndex(item => item.id === row.id);
      if (index !== -1) {
        this.$set(this.checkInRewards, index, this.originalRewardData);
      }
      this.editingRewardId = null;
      this.originalRewardData = null;
    },
    handleSave(row) {
      this.saveReward(row);
    },
    async saveReward(reward) {
      this.isSaving = true;
      try {
        const { id, ...dataToUpdate } = reward;
        const response = await updateReward(id, dataToUpdate);
        if (response.success) {
          this.$message.success('奖励规则保存成功！');
          this.editingRewardId = null;
          this.originalRewardData = null;
          await this.fetchRewards();
        } else {
          this.$message.error(response.message || '保存失败');
        }
      } catch (error) {
        this.$message.error('保存奖励规则失败');
      } finally {
        this.isSaving = false;
      }
    },

    // Item Picker Methods
    openItemPicker(reward) {
      this.rewardTarget = reward;
      this.itemPickerVisible = true;
    },
    selectItem(item) {
      if (this.rewardTarget === 'daily') {
        this.dailyReward.itemId = item.itemId;
        this.dailyReward.itemDefinition = item; // Update itemDefinition for daily reward
      } else if (this.rewardTarget) {
        this.rewardTarget.itemId = item.itemId;
        this.rewardTarget.itemDefinition = item; // Update itemDefinition for check-in reward
      } else if (this.giveItemDialogVisible) { // New: For giving items to users
        this.giveItemForm.itemId = item.itemId;
      }
      this.itemPickerVisible = false;
    },

    // User Management Methods
    async fetchUsers() {
      try {
        const response = await getAllUsers(); // Use imported function
        if (response.success) {
          this.users = response.data;
        } else {
          this.$message.error(response.message || '获取用户列表失败');
        }
      } catch (error) {
        this.$message.error('获取用户列表失败');
      }
    },
    searchUsers() {
      // This will be handled by computed property filteredUsers
    },
    async handleGiveItem(user) { // Made async to await fetchUserInventory
      this.selectedUser = user;
      this.giveItemForm = { itemId: '', quantity: 1 };
      this.selectedUserInventory = []; // Clear previous inventory
      await this.fetchUserInventory(user.id); // Fetch user's current inventory
      this.giveItemDialogVisible = true;
    },
    async fetchUserInventory(userId) {
      try {
        const response = await getUserInventory(userId);
        if (response.data && Array.isArray(response.data)) {
          this.selectedUserInventory = response.data;
        } else {
          this.$message.error(response.message || '获取用户物品列表失败');
        }
      } catch (error) {
        this.$message.error('获取用户物品列表失败');
      }
    },
    openItemPickerForGiveItem() {
      this.rewardTarget = null; // Clear rewardTarget to indicate it's for user item giving
      this.itemPickerVisible = true;
    },
    async submitGiveItem() {
      this.isGivingItem = true;
      try {
        const payload = {
          userId: this.selectedUser.id,
          itemId: this.giveItemForm.itemId,
          quantity: this.giveItemForm.quantity,
        };
        const response = await giveItemToUser(payload); // Use imported function
        if (response.success) {
          this.$message.success('物品添加成功！');
          this.giveItemDialogVisible = false;
          // Optionally refresh user's inventory after adding item
          await this.fetchUserInventory(this.selectedUser.id);
        } else {
          this.$message.error(response.message || '添加物品失败');
        }
      } catch (error) {
        this.$message.error('添加物品失败');
      } finally {
        this.isGivingItem = false;
      }
    },
  },
};
</script>

<style scoped>
.modern-layout {
  display: flex;
  height: 100vh;
  background-color: #f8f9fa;
}

.sidebar {
  width: 240px;
  background-color: #ffffff;
  border-right: 1px solid #e9ecef;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 20px;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  color: #343a40;
}

.sidebar-header i {
  margin-right: 12px;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.sidebar-menu li {
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #495057;
  transition: all 0.2s ease-in-out;
}

.sidebar-menu li i {
  margin-right: 12px;
  font-size: 18px;
}

.sidebar-menu li:hover {
  background-color: #f1f3f5;
}

.sidebar-menu li.active {
  background-color: #e9ecef;
  color: #212529;
  font-weight: 600;
}

.main-content {
  flex: 1;
  padding: 24px 32px;
  overflow-y: auto;
}

.view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.view-header h1 {
  font-size: 28px;
  font-weight: 600;
  color: #343a40;
}

.content-card {
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.table-filters {
  margin-bottom: 16px;
}

.modern-table .item-cell {
  display: flex;
  align-items: center;
}

.modern-table .item-image {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  margin-right: 12px;
}

.modern-table .item-info {
  display: flex;
  flex-direction: column;
}

.modern-table .item-name {
  font-weight: 500;
}

.modern-table .item-id {
  font-size: 12px;
  color: #6c757d;
}

.rewards-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
}

.image-uploader {
  display: flex;
  align-items: center;
}

.uploaded-image {
  width: 80px;
  height: 80px;
  margin-right: 16px;
  border-radius: 6px;
  border: 1px solid #dcdfe6;
}

.upload-component {
  display: inline-block;
}
</style>


<style scoped>
.modern-layout {
  display: flex;
  height: 100vh;
  background-color: #f8f9fa;
}

.sidebar {
  width: 240px;
  background-color: #ffffff;
  border-right: 1px solid #e9ecef;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 20px;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  color: #343a40;
}

.sidebar-header i {
  margin-right: 12px;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.sidebar-menu li {
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #495057;
  transition: all 0.2s ease-in-out;
}

.sidebar-menu li i {
  margin-right: 12px;
  font-size: 18px;
}

.sidebar-menu li:hover {
  background-color: #f1f3f5;
}

.sidebar-menu li.active {
  background-color: #e9ecef;
  color: #212529;
  font-weight: 600;
}

.main-content {
  flex: 1;
  padding: 24px 32px;
  overflow-y: auto;
}

.view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.view-header h1 {
  font-size: 28px;
  font-weight: 600;
  color: #343a40;
}

.content-card {
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.table-filters {
  margin-bottom: 16px;
}

.modern-table .item-cell {
  display: flex;
  align-items: center;
}

.modern-table .item-image {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  margin-right: 12px;
}

.modern-table .item-info {
  display: flex;
  flex-direction: column;
}

.modern-table .item-name {
  font-weight: 500;
}

.modern-table .item-id {
  font-size: 12px;
  color: #6c757d;
}

.rewards-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
}

/* Custom styles for the redesigned "Give Item to User" dialog */
.give-item-dialog .el-dialog__header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  padding: 15px 20px;
}

.give-item-dialog .el-dialog__title {
  font-weight: 600;
  color: #303133;
}

.give-item-dialog .el-dialog__body {
  padding: 20px 25px;
}

.dialog-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.user-info-card {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #ecf5ff; /* Light blue background */
  border-radius: 8px;
  border: 1px solid #d9ecff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.user-avatar {
  width: 48px;
  height: 48px;
  background-color: #409eff; /* Blue avatar background */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  color: #ffffff;
  font-size: 24px;
}

.user-details .user-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.user-details .user-id {
  font-size: 13px;
  color: #606266;
  margin: 5px 0 0;
}

.add-item-form .el-form-item {
  margin-bottom: 15px;
}

.add-item-form .item-input {
  width: 220px; /* Keep specific width */
}

.add-item-form .quantity-input {
  width: 120px; /* Keep specific width */
}

.user-inventory-section {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden; /* Ensures tabs and table fit within */
}

.user-inventory-section .el-tabs__header {
  background-color: #f5f7fa;
  padding: 0 15px;
}

.user-inventory-section .el-tabs__item {
  font-weight: 500;
}

.item-image-small {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  vertical-align: middle;
}

.empty-inventory-message {
  text-align: center;
  padding: 30px;
  color: #909399;
  font-size: 14px;
  background-color: #fcfcfc;
  border-radius: 8px;
  border: 1px dashed #ebeef5;
}

.empty-inventory-message i {
  font-size: 28px;
  margin-bottom: 10px;
  color: #c0c4cc;
}
</style>
